<template>
  <div class="login">
    <div class="top-bar">
      <div class="logo" style="color:white;font-size:40px">
        云立方演示系统
      </div>
    </div>
    <login-card @success="handleSuccess"></login-card>
  </div>
</template>

<script>
  import loginCard from '../littleComponents/loginCard'

  export default {
    name: "login",
    components: {
      loginCard,
    },
    methods:{
      handleSuccess(){
        this.$router.push({path:'/home'});
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../static/style/public';
  .login{
    display: flex;
    flex-direction: column;
    align-items: center;

    width:100%;
    height:100%;
    background-color: #eee;
    text-align: center;
    .top-bar{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      width:100%;
      height:50%;
      background-color: $primaryColor;
      .logo{
        margin-bottom: 50px;
        img{
          //width:381px;
          height:140px;
        }
      }
    }
    .input-block{
      padding:20px 40px 30px 40px;
      width:320px;
      background-color: #eee;
      border-radius: 5px;
      .title{
        margin:10px;
        font-size:25px;
        font-weight: 600;
      }
      .login-btn{
        width:100%;
        button{
          width:100%;
          background-color: $primaryColor;
        }
      }
      input{
        height:30px !important;
      }
    }
    .com-info{
      position:absolute;
      bottom:50px;
      left:0px;
      right:0px;
      color:black;

    }
  }
</style>
